<template>
  <div>
    <div id="style-header">
      <div class="block"></div>
      <div class="text"><span>行政区划</span></div>
    </div>
    <div id="district-container"><ul id="admin-tree" class="ztree"></ul></div>
  </div>
</template>

<script>
export default {
  attached(){
    var that=this;
    $.getJSON('static/config/adminTree.json',function(data){
      var zNodes = data.znodes;
      var setting = {
        data:{
          simpleData:{
            enable:true
          }
        },
        vue:that,
        callback:{
          onClick:function(e,treeId,treeNode){
            var bounds = treeNode.bbox;
            var adminId = treeNode.id;//行政区划码
            var name = treeNode.name;
            var vue = this.getZTreeObj("admin-tree").setting.vue;
            vue.$dispatch('map-bounds-change',{id:adminId,name:name,bounds:bounds});
          }
        },
        view:{
          showIcon:false
        }
      };
      $.fn.zTree.init($("#admin-tree"),setting,zNodes);
    });
  }
}
</script>

<style scoped>
#style-header {
  height: 20px;
  padding: 15px 0 15px 5px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}

#style-header .block{
  width: 5px;
  height: 18px;
  background-color: #2c67ed;
  margin: 2px;
  position: absolute;
  top: 4px;
}
#style-header .text{
  position: absolute;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  left: 20px;
  top: 7px;
}

#district-control {
  width: 250px;
  height: calc(100% - 65px);
  box-sizing: border-box;
  position: absolute;
  top: 25px;
  left: 30px;
}
#district-container{
  overflow: auto;
  position: absolute;
  width: 250px;
  height: calc(100% - 90px);
}

#district-container::-webkit-scrollbar {
  width: 6px;
}

#district-container::-webkit-scrollbar:horizontal {
  height: 6px;
}

/* 滚动条的滑轨背景颜色 */
#district-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 滑块颜色 */
#district-container::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
}
</style>
